import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {observer, inject} from '@tarojs/mobx'
import { AtNoticebar,AtToast } from 'taro-ui'
import {View, Swiper, SwiperItem, Image, Text, Input} from '@tarojs/components'
import {toJS} from "mobx";
import {IStoreProps} from '../../store/Stores'
import {getRuntime, partOf, getAvatar, getSimpleTime, typeOfJob, subtime} from '../../utils/common'
import Tabbar from '../../components/Tabbar'

import './index.less'

import icon_05 from '../../assets/img/icon_05.png'
import icon_06 from '../../assets/img/icon_06.png'
import icon_08 from '../../assets/img/icon_08.png'
import icon_09 from '../../assets/img/icon_09.png'
import icon_10 from '../../assets/img/icon_10.png'
import icon_11 from '../../assets/img/icon_11.png'
import icon_12 from '../../assets/img/icon_12.png'
import icon_13 from '../../assets/img/icon_13.png'
import icon_14 from '../../assets/img/icon_14.png'
import icon_15 from '../../assets/img/icon_15.png'
import search_icon from '../../assets/img/icon_18.png'  // 搜索图标
import notice from '../../assets/img/icon_17.png'
import img_04 from '../../assets/img/img_04.jpg'
import img_05 from '../../assets/img/img_05.jpg'
import img_06 from '../../assets/img/img_06.jpg'
import h from "nervjs/dist/packages/nerv/src/vdom/h";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  state = {
    upBanners: [],
    scrollingCaption: [], // 公告
    infoMations: [],
    issueShow: false,
    isTips: false,
    tipsText:'请先进行登录~',
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '建务通'})
    const {stores: {homeStore}} = this.props
    let home = toJS(homeStore.home)
    if(Object.keys(home).length>0){
      this.setState({
        upBanners: toJS(home.upBanners),
        infoMations:toJS(home.infoMations),
        scrollingCaption:toJS(home.scrollingCaption)
      })
    }else {
      homeStore.getHomeInfo({
        callback: homeInfo => {
          this.setState({
            upBanners: toJS(homeInfo.upBanners),
            infoMations:toJS(homeInfo.infoMations),
            scrollingCaption:toJS(homeInfo.scrollingCaption)
          })
        }
      })
    }
  }

  link(url: string) {
    if(url){
      window.location.href = url
    }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  handelUpgrade(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  /**
   * swiper因为需要手指左右滑动，禁用了swiper的点击效果，需要去取消默认动作
   */
  componentDidUpdate() {
    var bannerItems = document.getElementsByClassName('swiper-item-notice'),
      _this = this;
    let { scrollingCaption } = this.state
    for (let i = 0, length = bannerItems.length; i < length; i++) {
      bannerItems[i].onclick = function (e) {
        e.stopPropagation();
        //e.preventDefault(); // 取消事件默认动作
        _this.handelRouter('/pages/user/help_detail?id='+scrollingCaption[i]['id'])
      }
    }
  }

  render() {
    let { upBanners, infoMations,scrollingCaption } = this.state
    return (
      <View className='index-wrap'>
        <View className='swiper-wrap'>
          <Swiper className='swiper' indicatorColor='#fff' indicatorActiveColor='#00a0e9'
                  indicatorDots
          >
            {upBanners && upBanners.map(item => {
              return (
                <SwiperItem className='swiper-item' key={item.id}>
                  <Image className='swiper-img' src={item.picture} onClick={this.link.bind(this, item.url)} />
                </SwiperItem>
              )
            })}
          </Swiper>
        </View>
        {
          scrollingCaption.length>0&&
          <View className='notice-wrap'>
             <View className='notice'>
                <Image className='notice-img' src={notice} />
                <View className='notice-content'>
                   <Swiper className='swiper'
                           circular={false}
                      indicatorDots={false}
                      autoplay={true}
              >
                     {
                       scrollingCaption.map(item => {
                         return(
                           <SwiperItem className='swiper-item-notice' key={item.id} date-itemId={item.id} onClick={this.handelRouter.bind(this,'/pages/user/help_detail?id='+item.id)}>
                            <View className='title'>{item.title}</View>
                           </SwiperItem>
                         )
                       })
                     }
              </Swiper>
                </View>
             </View>
          </View>
        }

        <View className='index-nav'>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/all_services/none')}>
            <Image className='nav-icon' src={icon_05}/>
            <Text className='nav-title'>政府政务中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/legal/index')}>
            <Image className='nav-icon' src={icon_06} />
            <Text className='nav-title'>律政中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/finance/index')}>
            <Image className='nav-icon' src={icon_08}/>
            <Text className='nav-title'>工程金融中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/business/index')}>
            <Image className='nav-icon' src={icon_09}/>
            <Text className='nav-title'>工商服务中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/library/index')}>
            <Image className='nav-icon' src={icon_10}/>
            <Text className='nav-title'>建务库中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/company_credit/index')}>
            <Image className='nav-icon' src={icon_11}/>
            <Text className='nav-title'>企业信用中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/newest/personnel_center')}>
            <Image className='nav-icon' src={icon_12}/>
            <Text className='nav-title'>工程人才中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/business_school/index')}>
            <Image className='nav-icon' src={icon_13} />
            <Text className='nav-title'>建企商学院</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/tendering/index')}>
            <Image className='nav-icon' src={icon_14} />
            <Text className='nav-title'>投招标中心</Text>
          </View>
          <View className='nav' onClick={this.handelRouter.bind(this, '/pages/all_services/index')}>
            <Image className='nav-icon' src={icon_15} />
            <Text className='nav-title'>全部服务</Text>
          </View>
        </View>

        <View className='interval' />

        {
          infoMations.length>0&&
          <View className='column-title content-30'>
             <Text className='column-name'>最新消息</Text>
             <Text className='column-more' onClick={this.handelRouter.bind(this, '/pages/newest/index')}>查看更多 > </Text>
          </View>
        }

        <View className='list-01'>
          {
            infoMations.length>0&&
              infoMations.map( item => {
                let tpl= null;
                switch (item.publicationType) {
                  case 1:{ // 需求
                    tpl =  <View className='item' onClick={this.handelRouter.bind(this,'/pages/newest/demand_detail?id='+item.id)}>
                      <Text className='title'>{partOf(item.description,40)}</Text>
                      <View className='info'>
                        <View className='author'>
                          <Image className='author-pic' src={getAvatar(item.userLogoImg)} />
                          <Text className='author-name'>{item.userNickName}</Text>
                        </View>
                        <View className='time'>
                          {subtime(item.creationTime)}
                          <Text className='type type-demand'>需求</Text>
                        </View>
                      </View>
                    </View>
                    break
                  }
                  case 2: { // 服务
                    tpl = <View className='item' onClick={this.handelRouter.bind(this,'/pages/newest/service_detail?id='+item.id)}>
                      <Text className='title'>{partOf(item.description,40)}</Text>
                      <View className='info'>
                        <View className='author'>
                          <Image className='author-pic' src={getAvatar(item.userLogoImg)} />
                          <Text className='author-name'>{item.userNickName}</Text>
                        </View>
                        <View className='time'>
                          {subtime(item.creationTime)}
                          <Text className='type type-services'>服务</Text>
                        </View>
                      </View>
                    </View>
                    break
                  }
                  case 3:{ // 职位
                    tpl =  <View className='item item-other' onClick={this.handelRouter.bind(this,'/pages/newest/position_detail?id='+item.id)}>
                      <View className='top'>
                        <View className='title'>
                          <Text className='label'>{item.jobNature}</Text>
                          {item.positionName }
                        </View>
                        <View className='price'>{item.monthlyPay}</View>
                      </View>

                      <View className='bottom'>
                        <View className='label'>
                          <Text className='label-text'>{item.education}</Text>
                          <Text className='label-text'>{item.technicalTitle}</Text>
                          <Text className='label-text'>{item.recruitment}人</Text>
                          {/*<Text className='label-text brnone'>{item.address}</Text>*/}
                        </View>
                        <View className='time'>
                          {subtime(item.creationTime)}
                          <Text className='type type-position'>职位</Text>
                        </View>
                      </View>
                    </View>
                    break
                  }
                  default: { // 简历
                    tpl =  <View className='item item-other' onClick={this.handelRouter.bind(this,'/pages/newest/personnel_detail?id='+item.id)}>
                      <View className='top'>
                        <View className='title'>
                          <Text className='label'>{typeOfJob(item.typeOfJob)}</Text>
                          {item.positionName }
                        </View>
                        <View className='price'>{item.monthlyPay}</View>
                      </View>

                      <View className='bottom'>
                        <View className='label'>
                          <Text className='label-text'>{item.education}</Text>
                          <Text className='label-text brnone'>{item.technicalTitle}</Text>
                        </View>
                        <View className='time'>
                          {subtime(item.creationTime)}
                          <Text className='type type-resume'>人才</Text>
                        </View>
                      </View>
                    </View>
                  }
                }
                return tpl
              })
          }
        </View>
        <View className='interval'/>

        <View className='theme content-30'>
          <Image className='l-img' src={img_04} onClick={this.handelUpgrade.bind(this,'/pages/user/upgrade?id=3')} />
          <View className='r'>
            <Image className='r-img' src={img_05} onClick={this.handelUpgrade.bind(this,'/pages/user/upgrade?id=3')} />
            <Image className='r-img' src={img_06} onClick={this.handelUpgrade.bind(this,'/pages/user/qrcode')} />
          </View>
        </View>

        <View className='page-footer' >
          技术支持：云南西部硅谷
        </View>

        <Tabbar currentTab='home'  />
      </View>
    )
  }
}

export default Index as ComponentType
